<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/DOM练习 新.css">
</head>
<body>
    <div class="box">
        <div class="title"></div>
        <div class="con"></div>
    </div>
    <script src="./js/data.js"></script>
    <script>
        var title=document.querySelector('.title')
        var cons=document.querySelector('.con')
        var curI=0
        title.innerHTML=data.map(function(item,i){
            return `<span class="${curI===i? 'active' : ''}">${item.tit}</span>`
        }).join('')

        renderCon(data[curI])
        var tit=title.querySelectorAll('span')
        tit.forEach(function(span,i){
            span.onclick=function(){
                tit[curI].classList.remove('active')
                curI=i
                tit[curI].classList.add('active')
                renderCon(data[curI])
            }
        })
        function renderCon(data){
            cons.innerHTML = data.con.map(function(item){
                // 判断当前数据是字符串 直接p塞进去 否则对象dl
                return typeof item === "string" ? `<p>${item}</p>` : `
                            <dl>
                                <dt><img src="${item.src}"></dt>
                                <dd>${item.des}</dd>
                            </dl>
                            `
            }).join("")
        }
    </script>
</body>
</html>